<template>
	<div class="three-root">
		<threed-view
			class="threed-view"
			ref="threedView"
			@onBallMarkerClick="onBallMarkerClick"
		/>
		<div class="footer-lay">
			<button @click="onCloseClick">
				{{ $t("message.public.close") }}
			</button>
			<!-- <button @click="onRefreshClick"><i class="iconfont">&#xe81f;</i></button> -->
		</div>
	</div>
</template>

<script>
import { getSvgData, getTotDimensInteractive } from "@/api/api";
import ThreeDBaseCom from "@/components/ThreeDScene/threeDBaseCom.vue";
import threeData from "@/utils/testThreeData.js";
import { getLocalStorage } from "@/utils/storage";
export default {
	components: {
		"threed-view": ThreeDBaseCom,
	},
	props: [
		"inmacCode",
		"incolorOptionsValueSelect",
		"incolorOptionsValue",
		"inLifeAssBaseVaule",
		"inpltCode",
		"inmacName",
		"invaluePlant",
		"inmacType",
		"instyleOptionsValue",
		"invalue",
		"injudgValue",
		"inpositionValue",
		"defaultBgColor"
	],

	data() {
		//数据
		return {
			tempBallShapes: ["circle", "square", "diamond"],
			tempFillColors: [
				"#f000f0",
				"#00ff00",
				"#0000ff",
				"#ff00ff",
				"#ffff00",
				"#00ffff",
			],

			select2dMarkerData: null,

			threedMarkerData: [],
			testid: 0,

			svgSourceUrl: "",
			sourceExt: "",
			sourceUrl: "",
			isSourcePic: false,

			isSvgLoaded: false,
			testSvgIndex: 2,

			selectDate: "",
			pltCode: "",

			areaOption: "",
			markupsPosList: [],

			// 球标相关数据
			macNumb: "",
			pltName: "",
			macType: "",

			dmgCode: -1,
			corrCode: "206",
			blnCorrCode: "",

			selectDate: "",
			pltCode: "",

			areaOption: "",
			loadSvgWhenReShow: false,

			posCode: "",
			corrJudg: "",
			// 球标相关数据
		};
	},

	methods: {
		initMarkupInScene() {
			this.$refs.threedView.removeAllBallMarkers();
			this.threedMarkerData = [];

			let _self = this;
			threeData.testTagData.forEach((element) => {
				let tempShapeTypeIndex = this.randomNum(0, 2);
				let tempShapeFillColor = this.randomNum(0, 5);
				let tempShapeBorderColor = this.randomNum(0, 5);
				// inId, inStr, inShapeType, inPos, inFillColor, inBorderColor
				this.$refs.threedView.addBallLabel(
					this.testid,
					element.ID,
					this.tempBallShapes[tempShapeTypeIndex],
					element.position,
					this.tempFillColors[tempShapeFillColor],
					this.tempFillColors[tempShapeBorderColor]
				);

				let temp = {
					id: this.testid,
					text: element.ID,
					shape: this.tempBallShapes[tempShapeTypeIndex],
					position: element.position,
					fillcolor: this.tempFillColors[tempShapeFillColor],
					bordercolor: this.tempFillColors[tempShapeBorderColor],
				};
				this.testid++;
				this.threedMarkerData.push(temp);
			});
		},

		//生成从minNum到maxNum的随机数
		randomNum(minNum, maxNum) {
			switch (arguments.length) {
				case 1:
					return parseInt(Math.random() * minNum + 1, 10);
					break;
				case 2:
					return parseInt(
						Math.random() * (maxNum - minNum + 1) + minNum,
						10
					);
					break;
				default:
					return 0;
					break;
			}
		},

		/**
		 * 场景marker点击
		 */
		onBallMarkerClick(inId, inStr) {
			this.toSelect3dBallMarker(inId);
			this.$emit("on3dBallMarkerClick", inStr);
		},

		/**
		 * 选中场景marker 通过markerid
		 */
		toSelect3dBallMarker(inId) {
			this.$refs.threedView.toSelect3dBallMarker(inId);
		},

		/**
		 * 选中场景marker 通过显示的str
		 */
		toSelect3dBallMarkerByStr(inStr) {
			let tempData = this.threedMarkerData.find((e) => {
				return e.text == inStr;
			});

			if (tempData)
				this.$refs.threedView.toSelect3dBallMarker(tempData.id);
			else this.$refs.threedView.toSelect3dBallMarker(-1);
		},

		loadSvgDataByRow(
			inDmgCode,
			inCorrCodeUp, // 颜色筛选？
			inCorrCodeDown, // 颜色筛选？

			inSelectDate, // 日期
			inPltCode, // pltcode

			inMacNumb,
			inPltName,
			inMacType,
			loadSvgWhenReShow,
			checkArea,

			inCorrJudg,
			inPosCode
		) {
			if (
				inDmgCode == null ||
				inCorrCodeUp == null ||
				inCorrCodeDown == null ||
				inSelectDate == null ||
				inPltCode == null
			) {
				this.$refs.threedView.removeAllBallMarkers();
				this.threedMarkerData = [];
				return;
			}
			this.$refs.threedView.removeAllBallMarkers();
			this.threedMarkerData = [];

			this.macNumb = inMacNumb;
			this.pltName = inPltName;
			this.macType = inMacType;

			this.dmgCode = inDmgCode;
			this.corrCode = inCorrCodeUp || '206';
			this.blnCorrCode = inCorrCodeDown;

			this.selectDate = inSelectDate;
			this.pltCode = inPltCode;
			this.areaOption = checkArea;
			this.loadSvgWhenReShow = loadSvgWhenReShow;

			this.posCode = inPosCode;
			this.corrJudg = inCorrJudg;
			// debugger
			this.reloadMachineDrawing();
		},

		reloadMachineDrawing() {
			let data = {
				DmgCode: this.dmgCode,
				CorrCode: this.corrCode || '206',
				BlnCorrCode: this.blnCorrCode,
				SelectDate: this.selectDate,
				PltCode: this.pltCode,
				Option: this.areaOption,
				// pltName: this.pltName,
				// macNumb: this.macNumb,
				//        dmgCode: this.dmgCode,
				// macType: this.macType,
				PosCode: this.posCode,
				CorrJudg: this.corrJudg,
				Account: getLocalStorage("userName"),
			};

			getSvgData(data).then((res) => {
				console.log("res---", res);
				if (!res || res.data.code != 0) {
					return;
				}
				let dataJson = res.data.data;

				if (dataJson.length > 0) {
					this.markupsPosList = this.genBallMarkupsList(dataJson);
					console.log(this.markupsPosList);

					// 画球标开始
					for (
						let i = 0;
						i < this.markupsPosList.length &&
						i < threeData.testPos.length;
						i++
					) {
						// tempBallShapes: ["circle", "square", "diamond"],
						let tempShape = "circle";
						if (this.markupsPosList[i].shapeType == 13)
							tempShape = "square";
						else if (this.markupsPosList[i].shapeType == 14)
							tempShape = "diamond";
						else if (this.markupsPosList[i].shapeType == 15)
							tempShape = "circle";
						else if (this.markupsPosList[i].shapeType == 16)
							tempShape = "diamond";

						this.$refs.threedView.addBallLabel(
							this.testid,
							this.markupsPosList[i].showID,
							tempShape,
							threeData.testPos[i],
							this.markupsPosList[i].ballFillColor,

							this.markupsPosList[i].lineColor
						);

						let temp = {
							id: this.testid,
							text: this.markupsPosList[i].showID,
							shape: tempShape,
							position: threeData.testPos[i],
							fillcolor: this.markupsPosList[i].lineColor,
							bordercolor: this.markupsPosList[i].ballFillColor,
						};
						this.testid++;
						this.threedMarkerData.push(temp);
					}

					// 画球标结束
				}
			});
		},

		genBallMarkupsList(originData) {
			var reList = [];
			for (var i = 0; i < originData.length; i++) {
				let orignItem = originData[i];
				if (orignItem.poS_ORDR == null) continue;

				let temp = {};
				temp.sId = orignItem.poS_ORDR;
				temp.shapeType = Number(orignItem.blN_TYPE) + 12;
				temp.showType = "trans";
				temp.showID = orignItem.poS_ORDR;
				temp.lineColor = "#0000FF";
				temp.lineWidth = "5";
				temp.fontSize = orignItem.blN_FNTSIZ;
				temp.fontName = orignItem.blN_FNTNAM;
				temp.lineStyle = "0";
				temp.points = orignItem.thckBlnPoints;
				if (temp.points[0].blN_COLOR)
					temp.ballFillColor = temp.points[0].blN_COLOR;
				else temp.ballFillColor = "#ffffff";
				reList.push(temp);

				for (var j = 0; j < orignItem.thckBlnPoints.length; j++) {
					orignItem.thckBlnPoints[j].x =
						orignItem.thckBlnPoints[j].blN_X;
					orignItem.thckBlnPoints[j].y =
						orignItem.thckBlnPoints[j].blN_Y;
				}
			}
			return reList;
		},

		/**
		 * 关闭按钮
		 */
		onCloseClick() {
			this.$emit("onCloseClick");
		},

		getThreeNumberList(inDmgCode) {
			if (inDmgCode == null) return;
			getTotDimensInteractive({
				dmgCode: inDmgCode,
			}).then((res) => {
				if (res.data.code == 0) {
					let tempPartIds = [];
					res.data.data.forEach((element) => {
						tempPartIds.push(element.partsCode);
					});
					// this.$refs.threedView.setElemnetsColorsAndResetOther(
					// 	tempPartIds
					// );
					this.$refs.threedView.setElementVisibleAndResetOther(
						tempPartIds
					);
				}
			});
		},
	},

	mounted() {
		this.$refs.threedView.initEngineAndScene(
			threeData.modelJsonUrl,
			threeData.modelId,
			threeData.initView,
			this.defaultBgColor
		);

		// this.initMarkupInScene();
		this.loadSvgDataByRow(
			this.inmacCode,
			this.incolorOptionsValueSelect, // 颜色筛选？
			this.incolorOptionsValue, // 颜色筛选？
			this.inLifeAssBaseVaule,
			this.inpltCode,

			this.inmacName,
			this.invaluePlant,
			this.inmacType,
			this.instyleOptionsValue != 2,
			this.invalue, // 筛选检査分区
			this.injudgValue,
			this.inpositionValue
		);

        this.getThreeNumberList(this.inmacCode)
	},
};
</script>

<style lang="scss" scoped>
.three-root {
	border: 1px solid #c3c3c3;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.threed-view {
	width: 100%;
	height: calc(100% - 0px);
}

.footer-lay {
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 47px;
	padding: 0 15px;
	border-top: 1px solid #d9d9d9;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	background: #ffffff;
	button {
		width: 82px;
		height: 32px;
		background: #ffffff;
		border: 1px solid #d9d9d9;
		margin-right: 12px;
		border-radius: 4px;
	}

	button:nth-child(1) {
		// position: absolute;
		background: #eb7421;
		color: #fff;
		right: 0px;
	}

	button:nth-child(2) {
		width: 52px;
		background-color: #f8f8f8;
		border: 1px solid #d9d9d9;
		color: rgba(0, 0, 0, 0.65);
	}

	.iconfont {
		color: rgba(0, 0, 0, 0.65);
	}
}
</style>